// 分享签到
import { getPicFullPath } from '../../../common/utils';
import { getSysInfo } from '../../../common/env';
import { COS_CONF } from '../../../constants/common';
import { APPNAME } from '../../../config';

const _wh = (num) => {
    const { windowWidth = 1 } = getSysInfo();
    return num * (windowWidth / 375);
};

const _size = (info) => {
    let width = _wh(343);
    let height = _wh(435);
    return { width, height };
};

const createWxml = (userInfo, info, qrcode) => {
    return `
        <view class="container">
            <view class="header">
                <image class="hd-avatar" src="${getPicFullPath(userInfo.pic && userInfo.pic !== '头像1' ? userInfo.pic : COS_CONF.defaultPic)}" />
                <view class="hd-info">
                    <text class="hd-name">${userInfo.nickName}</text>
                    <text class="hd-data">邀请你来参与${info.brandName}签到</text>
                </view>
            </view>
            <view class="body">
                <image class="bd-cover" src="${getPicFullPath(info.background)}" />
            </view>
            <view class="footer">
                <view class="ft-info">
                    <text class="ft-name">${APPNAME}</text>
                    <text class="ft-guide">长按识别小程序码，一起围观 ></text>
                </view>
                <image class="ft-qrcode" src="${qrcode}" />
            </view>
        </view>
    `;
};

const createStyle = (info) => {
    return {
        container: {
            padding: _wh(12),
            backgroundColor: '#ffffff',
            lineHeight: 1.4,
            verticalAlign: 'middle',
            ..._size(info),
        },
        header: {
            width: _wh(319),
            height: _wh(40),
            marginTop: _wh(4),
            flexDirection: 'row',
            alignItems: 'center',
        },
        hdAvatar: {
            width: _wh(40),
            height: _wh(40),
            borderRadius: 3,
            backgroundColor: '#cccccc',
        },
        hdInfo: {
            width: _wh(268),
            height: _wh(40),
            marginLeft: _wh(10),
            flexDirection: 'column',
            justifyContent: 'center',
        },
        hdName: {
            width: _wh(268),
            height: _wh(16),
            fontSize: 14,
        },
        hdData: {
            width: _wh(268),
            height: _wh(14),
            marginTop: _wh(6),
            fontSize: 12,
            color: '#999999',
        },
        body: {
            width: _wh(319),
            height: _wh(255),
            marginTop: _wh(12),
        },
        bdCover: {
            width: _wh(319),
            height: _wh(255),
        },
        footer: {
            width: _wh(319),
            height: _wh(80),
            marginTop: _wh(16),
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
        },
        ftName: {
            width: _wh(209),
            height: _wh(25),
            fontSize: 18,
            color: '#000000',
        },
        ftGuide: {
            width: _wh(209),
            height: _wh(14),
            marginTop: _wh(8),
            fontSize: 12,
            color: '#878891',
        },
        ftQrcode: {
            width: _wh(80),
            height: _wh(80),
        },
    };
};

const createSize = _size;

module.exports = {
    createWxml,
    createStyle,
    createSize,
};
